<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_background-clip</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 120px;
            font-weight: bold;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);
            /*文字透明的*/
            color: transparent;

            background-image: url('../images/bg02.jpg');
            background-repeat: no-repeat;
            background-origin: border-box;

            /*-从文本修剪(将背景图修剪到文字上)-前提是将文字设置为透明*/
            -webkit-background-clip: text

            /*-从边框剪断*/
            /*-webkit-background-clip: border-box*/
        }
    </style>
</head>
<body>
<div class="box1">你好啊</div>
</body>
</html>